import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Button, Row, Col,
    Form, Checkbox, Switch, Tabs,
    Select, DatePicker, Input, Radio,
    InputNumber, Table, Typography
} from 'antd';
import {
    PlusOutlined,
    ImportOutlined,
    PrinterOutlined,
} from '@ant-design/icons';
import BomTree from './bomTree';

const { TabPane } = Tabs;
const { Text } = Typography;
class ViewPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: []
        }
    }
    formRef = React.createRef();
    onFinish = (values) => {
        console.log(values)
    }
    render() {
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        return (
            <PageHeaderWrapper>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >

                    <Row gutter={[16, 16]}>
                        <Col span={6}>
                            <Card title="制造工艺"
                                extra={[<Button key="B1" type="link" icon={<PlusOutlined />}>设计</Button>]}>
                                <BomTree />
                            </Card>
                        </Col>
                        <Col span={18}>
                            <p>
                                <Button type="primary" icon={<PlusOutlined />}>新建</Button>
                                <Button type="primary" htmlType="submit" style={{ marginLeft: 5 }}>保存</Button>
                                <Button type="link" icon={<PrinterOutlined />}>打印预览</Button>
                            </p>
                            <Card title="工单明细">
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="工单" key="1">
                                        <Row>
                                            <Col span={12}>
                                                <Form.Item name={['jobHead', 'JobNum']} label="工单号"
                                                    rules={[{ required: true, message: "工单号必填" }]}>
                                                    <Input style={{ width: 200 }} />
                                                </Form.Item>
                                                <Form.Item label="物料">
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['jobHead', 'PartNum']}
                                                            rules={[{ required: true, message: "请输入物料编码" }]}>
                                                            <Input style={{ width: 200 }} />
                                                        </Form.Item>
                                                        <Form.Item noStyle name={['jobHead', 'IUM']}>
                                                            <Select placeholder="版本" style={{ width: 90 }}></Select>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item name={['jobHead', 'PartDescription']} label="描述">
                                                    <Input disabled />
                                                </Form.Item>
                                                <Form.Item name={['jobHead', 'PersonID']} label="计划员">
                                                    <Select
                                                        style={{ width: 200 }}
                                                        placeholder="请选择计划员">
                                                    </Select>
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            name={['jobHead', 'JobClosed']}
                                                            valuePropName="checked">
                                                            <Checkbox>已完结</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['jobHead', 'JobFirm']}
                                                            valuePropName="checked">
                                                            <Checkbox>已确定</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['jobHead', 'JobReleased']}
                                                            valuePropName="checked">
                                                            <Checkbox>已发放</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['jobHead', 'JobEngineered']}
                                                            valuePropName="checked">
                                                            <Checkbox>已设计</Checkbox>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['jobHead', 'DueDate']}
                                                    label="需求日期"
                                                    rules={[{ required: true, message: "请选择订单日期" }]}>
                                                    <DatePicker />
                                                </Form.Item>
                                                <Form.Item label="生产数量">
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['jobHead', 'ProdQty']}
                                                            rules={[{ required: true, message: "生产数量必填" }]}>
                                                            <InputNumber min={1} />
                                                        </Form.Item>
                                                        <Form.Item
                                                            noStyle
                                                            name={['jobHead', 'IUM']}
                                                            rules={[{ required: true, message: "单位必填" }]}>
                                                            <Input style={{ width: 50 }} placeholder="IUM" />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                            </Col>
                                        </Row>

                                    </TabPane>
                                    <TabPane tab="物料" key="2">
                                        <Row>
                                            <Col span={12}>
                                                <Form.Item name={['JobMtl', 'MtlSeq']} label="物料序号">
                                                    <Select style={{ width: 100 }}>
                                                    </Select>
                                                </Form.Item>
                                                <Form.Item label="物料编码">
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobMtl', 'PartNum']}
                                                            rules={[{ required: true, message: "请输入物料编码" }]}>
                                                            <Input style={{ width: 200 }} />
                                                        </Form.Item>
                                                        <Form.Item noStyle name={['JobMtl', 'RevisionNum']}>
                                                            <Select placeholder="版本" style={{ width: 90 }}></Select>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item name={['JobMtl', 'PartDescription']} label="描述">
                                                    <Input disabled />
                                                </Form.Item>
                                                <Form.Item style={{ marginBottom: 0 }} label="相关工序">
                                                    <Input.Group compact>
                                                        <Form.Item name={['JobMtl', 'RelatedOperation']}>
                                                            <Input placeholder="10" />
                                                        </Form.Item>
                                                        <Form.Item>
                                                            <Input placeholder="工序描述" />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="数量/父项">
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobMtl', 'QtyPer']}
                                                            rules={[{ required: true, message: "需求数量必填" }]}>
                                                            <InputNumber min={1} style={{ width: 120, marginRight: 10 }} />
                                                        </Form.Item>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobMtl', 'FixedQty']}
                                                            valuePropName="checked">
                                                            <Checkbox>固定数量</Checkbox>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="需求数量">
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobMtl', 'RequiredQty']}
                                                            rules={[{ required: true, message: "需求数量必填" }]}>
                                                            <InputNumber min={1} style={{ width: 120 }} />
                                                        </Form.Item>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobMtl', 'IUM']}
                                                            rules={[{ required: true, message: "单位必填" }]}>
                                                            <Input style={{ width: 70 }} placeholder="单位" />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            name={['JobMtl', 'IssueComplete']}
                                                            valuePropName="checked">
                                                            <Checkbox>发料完成</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['JobMtl', 'Direct']}
                                                            valuePropName="checked">
                                                            <Checkbox>直接生产</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['JobMtl', 'BuyIt']}
                                                            valuePropName="checked">
                                                            <Checkbox>直接采购</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['JobMtl', 'RcvInspectionReq']}
                                                            valuePropName="checked">
                                                            <Checkbox>需要检验</Checkbox>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}></Col>
                                        </Row>
                                    </TabPane>
                                    <TabPane tab="半成品" key="3">
                                        <Row>
                                            <Col span={12}>
                                                <Form.Item name={['JobAsmbl', 'AssemblySeq']} label="半成品号">
                                                    <Select style={{ width: 100 }}>
                                                    </Select>
                                                </Form.Item>
                                                <Form.Item label="物料编码">
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobAsmbl', 'PartNum']}
                                                            rules={[{ required: true, message: "请输入物料编码" }]}>
                                                            <Input style={{ width: 200 }} />
                                                        </Form.Item>
                                                        <Form.Item noStyle name={['JobAsmbl', 'RevisionNum']}>
                                                            <Select placeholder="版本" style={{ width: 90 }}></Select>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item name={['JobAsmbl', 'PartDescription']} label="描述">
                                                    <Input disabled />
                                                </Form.Item>
                                                <Form.Item style={{ marginBottom: 0 }} label="相关工序">
                                                    <Input.Group compact>
                                                        <Form.Item name={['JobAsmbl', 'RelatedOperation']}>
                                                            <Input placeholder="10" />
                                                        </Form.Item>
                                                        <Form.Item>
                                                            <Input placeholder="工序描述" />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="数量/父项">
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobAsmbl', 'QtyPer']}
                                                            rules={[{ required: true, message: "需求数量必填" }]}>
                                                            <InputNumber min={1} style={{ width: 120, marginRight: 10 }} />
                                                        </Form.Item>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobAsmbl', 'FixedQty']}
                                                            valuePropName="checked">
                                                            <Checkbox>固定数量</Checkbox>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="需求数量">
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobAsmbl', 'RequiredQty']}
                                                            rules={[{ required: true, message: "需求数量必填" }]}>
                                                            <InputNumber min={1} style={{ width: 120 }} />
                                                        </Form.Item>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobAsmbl', 'IUM']}
                                                            rules={[{ required: true, message: "单位必填" }]}>
                                                            <Input style={{ width: 70 }} placeholder="单位" />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>

                                                    <Form.Item
                                                        name={['JobAsmbl', 'Direct']}
                                                        valuePropName="checked"
                                                        style={{ display: "inline-block", width: 100 }}>
                                                        <Checkbox>直接生产</Checkbox>
                                                    </Form.Item>
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}></Col>
                                        </Row>
                                    </TabPane>
                                    <TabPane tab="工序" key="4">
                                        <Row>
                                            <Col span={12}>
                                                <Form.Item name={['JobOper', 'OprSeq']} label="序号">
                                                    <Input style={{ width: 100 }} />
                                                </Form.Item>
                                                <Form.Item label="生产标准">
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['JobOper', 'ProdStandard']}
                                                            rules={[{ required: true, message: "请输入生产标准" }]}>
                                                            <Input style={{ width: 200 }} />
                                                        </Form.Item>
                                                        <Form.Item noStyle name={['JobOper', 'StdFormat']}>
                                                            <Select placeholder="单位" style={{ width: 90 }}></Select>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item style={{ marginBottom: 0 }} label="工序">
                                                    <Input.Group compact>
                                                        <Form.Item name={['JobOper', 'OpCode']}>
                                                            <Select placeholder="选择工序" style={{ width: 150 }}></Select>
                                                        </Form.Item>
                                                        <Form.Item name={['JobOper', 'OpDesc']}>
                                                            <Input disabled placeholder="工序描述" />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            name={['JobOper', 'Subcontract']}
                                                            valuePropName="checked">
                                                            <Checkbox>外包</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['JobOper', 'FinalOpr']}
                                                            valuePropName="checked">
                                                            <Checkbox>最后工序</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['JobOper', 'AutoReceive']}
                                                            valuePropName="checked">
                                                            <Checkbox>自动收货</Checkbox>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['JobOper', 'SchedRelation']}
                                                    label="排程方式"
                                                    rules={[{ required: true, message: "请选择排程方式" }]}>
                                                    <Radio.Group name="radiogroup">
                                                        <Radio value="SS">开始-到-开始</Radio>
                                                        <Radio value="FS">结束-到-开始</Radio>
                                                        <Radio value="FF">结束-到-结束</Radio>
                                                    </Radio.Group>
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item label="资源群组" name={['JobOper', 'ResourceGrpID']}
                                                    rules={[{ required: true, message: "请选择资源群组" }]}>
                                                    <Select placeholder="资源群组" style={{ width: 200 }}></Select>
                                                </Form.Item>
                                                <Form.Item label="资源" name={['JobOper', 'ResourceID']}
                                                    rules={[{ required: true, message: "请选择资源" }]}>
                                                    <Select placeholder="资源" style={{ width: 200 }}></Select>
                                                </Form.Item>
                                                <Form.Item label="工序备注" name={['JobOper', 'CommentText']}>
                                                    <Input.TextArea rows={5} />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                    </Row>

                </Form>
            </PageHeaderWrapper>
        )
    }
}
export default ViewPage;